<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctx!}/assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx!}/assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="${ctx!}/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <link href="${ctx!}/assets/css/animate.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${ctx!}/assets/css/admin-main.css" rel="stylesheet">

    <link rel="stylesheet" href="${ctx!}/assets/bower_components/amazeui/dist/css/amazeui.min.css"/>
    <link rel="stylesheet" href="${ctx!}/assets/css/colddemo.css">
    <style>

        <#--5.75*9.32-->
        <#--中心店：2.28,2.27-->
        .clicklabel{
            position: absolute;
            width: 150px;
            height: 123px;
        }
    </style>

</head>

<body class="gray-bg">
<div class="tabe_div"  style="padding-right: 0">
    <p class="p_line text_ient" ></p>
    <div style="display: inline" >
        <@shiro.hasPermission name="system:project:index">
        <a href="#" class="a_add" id="add_box" onclick="back();">返回</a>
        </@shiro.hasPermission>
    <@shiro.hasPermission name="system:project:edit">
    <a href="#" class="a_add" id="startConf">配置</a>
    </@shiro.hasPermission>
    <@shiro.hasPermission name="system:project:edit">
    <a href="#" class="a_add" id="stopConf" >保存</a>
    </@shiro.hasPermission>
    </div>

    <p class="p_line text_ient" ></p>
    <div>
        <form  id="frm" method="post" action="${ctx!}/admin/project/panel/edit">
            <input type="hidden" id="id" name="id" value="${project.id}">
            <#--<input type="hidden" id="display" name="display" value="${project.display}">-->
            <input type="hidden" id="panelX" name="panelX" value="${project.panelX}">
            <input type="hidden" id="panelY" name="panelY" value="${project.panelY}">
        </form>
    </div>
    <div class="col-sm-9">
        <div>
            <img style="height: 80%; width: 80%" src="${ctx}/assets/img/map.jpg" alt="" id="confPic">
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>

<!-- Bootstrap table -->
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- Peity -->
<script src="${ctx!}/assets/js/plugins/peity/jquery.peity.min.js"></script>

<script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>

<#--图片-->
<#--<script src="${ctx!}/assets/bower_components/jquery/dist/jquery.min.js"></script>-->
<script src="${ctx!}/assets/bower_components/amazeui/dist/js/amazeui.min.js"></script>
<script src="${ctx!}/assets/bower_components/MessengerJS/messenger.js"></script>
<script src="${ctx!}/assets/bower_components/layer/layer.js"></script>

<!-- 自定义js -->
<script src="${ctx!}/assets/js/content.js?v=1.0.0"></script>
<#--<script src="${ctx!}/assets/js/adminPicConfig.js"></script>-->

<script>
    function back(){
        window.location.href = '${ctx!}/admin/project/display/${project.id}';
    }

    window.onload = function() {

        var confPicPos = $("#confPic").offset();
        confPicPos["width"] = $("#confPic").width();
        confPicPos["height"] = $("#confPic").height();
        var deltax = 40, deltay = 40;

        function drawLabel(x,y) {
            var top_value = document.getElementById("confPic").offsetTop + document.body.scrollTop;
            var left_value = document.getElementById("confPic").offsetLeft; //left $project.panel}
            //${ctx}/assets/img/map_panel.png
            var _labelhtml = '<img id="panel" src="${project.panel}" style="top:'+(top_value+y-deltay)+'px;left: '+(left_value+x-deltax)+'px" class="clicklabel"></img>';
            $(_labelhtml).insertAfter('#confPic')
        }

        $("#startConf").on('click',function () {
            //bind img event
            $('#confPic').on('click',function (e) {
                var xPercent = (e.offsetX/confPicPos.width).toFixed(2);
                var yPercent = (e.offsetY/confPicPos.height).toFixed(2);
                var panel = document.getElementById("panel");
                if(panel) {
                    panel.parentNode.removeChild(panel);
                }
                $("#panelX").val(xPercent);
                $("#panelY").val(yPercent);
                drawLabel(xPercent*confPicPos.width,yPercent*confPicPos.height);
            })
        });

        $("#stopConf").on('click',function () {
            //unbind img event
            $('#confPic').off('click');
            console.log($("#frm").serialize());
            $.ajax({
                type: "POST",
                dataType: "json",
                // contentType:"application/json",
                url: "${ctx!}/admin/project/panel/edit",
                data: $("#frm").serialize(),
                success: function(msg){
                    layer.msg(msg.message, {time: 2000},function(){
                        // var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        // parent.layer.close(index);
                    });
                }
            });
        });

    }



</script>


</body>

</html>
